<template>
    <a-modal v-model:visible="healthShow" title="健康证上传" :width="850" @ok="healthOk" :destroyOnClose="true" @cancel="outHealth"
            :z-index="20">
            <div style="margin-bottom:20px;font-size:16px">
                <span style="color:#333;margin-right:10px">当前健康证审核状态：</span>
                <template v-if="healthData">
                    <span :style="{ color: share.getExamineState(healthData.examine)[1] }">{{
                        share.getExamineState(healthData.examine)[0] }}</span>
                </template>
                <span v-else style="color:gray">未上传健康证</span>

            </div>
            <a-image-preview-group v-if="healthData">
                <a-image :width="300"
                    :src="share.http + `/${healthData.health_dir}/${healthData.technician_uid}/${healthData.health}`" />
            </a-image-preview-group>
            <div v-if="healthData">
                <span style="font-size: 16px;color: #999;">
                    发证日期:
                    <span style="color: #666;">{{ healthData.health_date }}</span>
                </span>
                <span style="font-size: 16px;color: #999;">
                    健康证号:
                    <span style="color: #666;">{{ healthData.health_number }}</span>
                </span>
            </div>
            <div style="font-size: 16px;color: #333;margin-top: 30px;margin-bottom: 20px;">上传新的健康证:</div>
            <a-form :model="healthTechData" ref="healthRef">
                <a-form-item label="请输入健康证号" name="number" :rules="[{ required: true, message: '请输入健康证号!' }]">
                    <a-input v-model:value="healthTechData.number" style="width: 200px;" placeholder="请输入健康证号码"/>
                </a-form-item>
                <a-form-item name="date" label="请选择发证日期" :rules="[{ required: true, message: '请选择发证时间!' }]">
                    <a-date-picker v-model:value="healthTechData.date" value-format="YYYY-MM-DD" placeholder="请填写发证时间" />
                </a-form-item>
                
                <a-form-item label="上传健康证图片" name="img" :rules="[{ required: true, message: '请选择图片!' }]">
                    <a-upload  list-type="picture-card" :fileList="healthTechData.img" :maxCount="1"  :beforeUpload="healthBefore">
                        <div>
                            <PlusOutlined />
                            <div style="margin-top: 8px">Upload</div>
                        </div>
                    </a-upload>
                </a-form-item>
            </a-form>

        </a-modal>
</template>

<!-- 技师健康证模块 -->
<script setup>
import { ref, defineProps,defineEmits,watch} from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { techStatAPI,imageAPI } from '../../../../api/management';
import { useUserData } from '../../../../stores/userData';
import { message } from 'ant-design-vue';
import share from '../../../../util/commnet'

const store = useUserData();
const healthShow = ref(false);
const healthData = ref({});         //获取原来的数据
const healthTechData = ref({        //上传表单的数据
    date: '',
    number: '',
    img:[]
});
const healthRef = ref(null);//上传表单的ref
const healthUp = ref('');                   //上传图片
const healthUid = ref('');                  //当前健康证的技师uid

const emit = defineEmits(['setShow'])       //关闭组件的方法
const pros = defineProps({
    uid:{                       //拿到uid
        type:String,
        default:''
    },
    shows:{                     //是否关闭组件
        type:Boolean,
        default:false
    }
})

watch(                              //监听是否关闭健康证上传模块
    ()=>pros.shows,
    async(n,o)=>{
        if(n && pros.uid){                      //当需要显示模块且存在uid时 拉取数据
            healthUid.value = pros.uid;
            healthUp.value = '';
            let res = await techStatAPI(`selprove|${pros.uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
            if (!res || res.code == 406) {
                message.error("账号失效");
                router.replace({ name: 'login' });
                return;
            } else if (res.code != 200) {
                message.error(res.message);
                return
            }
            healthData.value = res.data[0];
        }
        healthShow.value = n;
    }
)

const healthBefore = f => {               //上传图片前
    healthUp.value = f;
    healthTechData.value.img = [{ url: URL.createObjectURL(f) }]
    return false;
}

const healthOk = async () => {      //点击OK时先触发表单验证
    healthRef.value.validateFields()
    .then(async r=>{
        let image = await imageAPI(`healthSet|${healthData.value?healthData.value.health:''}|${share.health}|${healthUid.value}|${store.data.token}|${store.data.uuid}|${store.data.phone}`, healthUp.value);
        console.log(image);
        if (image.code == 406) {
            message.error("账号失效");
            router.replace({ name: 'login' });
            return;
        } else if (image.code != 200) {
            message.error(image.message);
            return
        }
        let res = await techStatAPI(`proveSet|${healthUid.value}|${image.file}|${healthTechData.value.number}|${healthTechData.value.date}|${share.health}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
        if (!res || res.code == 406) {
            message.error("账号失效");
            router.replace({ name: 'login' });
            return;
        } else if (res.code != 200) {
            message.error(res.message);
            return
        }
        message.success("添加成功");
        healthRef.value.resetFields();
        emit('setShow',false);
    })
}

const outHealth = ()=>{               //当点击蒙层或者取消时
    healthRef.value.resetFields();
    emit('setShow',false)           //传递父组件关闭
}

</script>